import styles from "@styles/article.module.less";
import GeekIcon from "@shared/geekIcon";
import {
  useLikeArticleMutation,
  useUnLikeArticleMutation,
} from "@service/article";

interface Props {
  // 文章id
  id: string | undefined;
  // 是否已经点赞 1点赞 -1取消点赞
  isLike: 0 | 1 | -1 | undefined;
}

export default function Like({ id, isLike }: Props) {
  const [likeArticle] = useLikeArticleMutation();
  const [unLikeArticle] = useUnLikeArticleMutation();

  const likeHandler = () => {
    if (typeof id === "undefined" || typeof isLike === "undefined") return;
    if (isLike === 1) {
      // 取消点赞
      unLikeArticle(id);
    } else if (isLike === -1) {
      likeArticle(id);
    }
  };

  return (
    <div className={styles.item} onClick={likeHandler}>
      <GeekIcon type={isLike === 1 ? "iconbtn_like_sel" : "iconbtn_like2"} />
      <span>点赞 {isLike}</span>
    </div>
  );
}
